import ProTable from '@ant-design/pro-table';
import {Button, Form, message, Modal, Space} from 'antd';
import React from 'react';
import {ProductType} from '../../model';
import PropTypes from 'prop-types';
import { ProFormDateRangePicker } from '@ant-design/pro-form';

class CustomerChoose extends React.Component<any,any>{


    static propTypes = {
        modalVisible:PropTypes.bool,
        values:PropTypes.array,
        onSubmit:PropTypes.func,
        onCancel:PropTypes.func,
        columns:PropTypes.any,
        requestFunction:PropTypes.any,
        byId:PropTypes.string,
        single:PropTypes.bool,
        dateRangeFlag:PropTypes.bool,
    }
    
    onCleanSelected:any = {}
    state={
        selectedRowsState:[],
        dateRange:['','']
    }

    rowSelection = {
        onChange: (key:any, selectedRows:any) => {
            this.setState({selectedRowsState:selectedRows});
        },
        getCheckboxProps: (record:any) => {
          var index = this.props.values.findIndex((item:any)=>{
            return item.id === record.id;
          });
          if(index<0){
            return {
              disabled: false,
              name: record.name,
            }
          }else{
            return {
              disabled: true,
              name: record.name,
            }
          }
        }
      };
    
    constructor(props:any){
        super(props);
    }

    render(){  
        return (
            <Modal
                title="请选择"
                destroyOnClose={true}
                width={1000}
                visible={this.props.modalVisible}
                onOk={()=>{
                    if(this.props.dateRangeFlag&&this.state.dateRange[0]===''){
                      message.warning('请先选择期限')
                      return;
                    }
                    var data = this.state.selectedRowsState.filter((item:any)=>{  
                        if(this.props.dateRangeFlag){
                          item.start_time = this.state.dateRange[0]
                          item.deadline = this.state.dateRange[1]
                        }     
                        return !item.choose;
                      });
                    this.props.onSubmit(data);
                    this.setState({selectedRowsState:[]})
                }}
                onCancel={()=>{
                    this.props.onCancel();
                }}
                >
                <ProTable<ProductType>
                    scroll={{ y: 240 }}
                    toolBarRender={false }
                    columns={this.props.columns}
                    search={{span:6,
                      optionRender: ({ searchText, resetText }, { form }) => [
                            <Button
                              key='search'
                              type='primary'
                              onClick={() => {
                                if(typeof(this.onCleanSelected)==='function'){
                                  this.onCleanSelected()
                                }
                                if(this.props.columns[1].title==='价格体系'){
                                  var currentPrice = form?.getFieldValue('currentPrice');
                                  if(currentPrice){
                                    form?.submit();
                                  }else{
                                    message.warning('请先选择价格体系')
                                  }
                                }else{
                                  form?.submit();
                                }
                              }}
                            >
                              {searchText}
                            </Button>,
                            <Button
                              key='rest'
                              onClick={() => {
                                form?.resetFields();
                                form?.submit();
                              }}
                            >
                              {resetText}
                    </Button>]}}
                    tableAlertOptionRender={({selectedRowKeys,onCleanSelected}) => {
                      this.onCleanSelected = onCleanSelected
                      return (
                        <Space size={16}>
                          <a key="i2" style={{ marginLeft: 8 }} onClick={()=>{
                            this.setState({dateRange:['','']})
                            onCleanSelected()
                          }}>
                            取消选择
                          </a>
                          <Form.Item style={{marginBottom:-25}}>
                          <ProFormDateRangePicker label="授权期限" hidden={!this.props.dateRangeFlag} fieldProps={{onChange:(val:any)=>{
                              if(val){
                                this.setState({dateRange:[val[0].format('YYYY-MM-DD'),val[1].format('YYYY-MM-DD')]})
                              }else{
                                this.setState({dateRange:['','']})
                              }
                            }}}></ProFormDateRangePicker>
                          </Form.Item>
                        </Space>
                      );
                    }}
                    request={async(params, sorter, filter) => this.props.requestFunction({...params,filter})}
                    rowKey="id"
                    pagination={{
                      pageSizeOptions:['20', '100', '500']
                    }}
                    rowSelection={this.props.single?false:{
                      type: "checkbox",
                      ...this.rowSelection,
                    }}
                    />
            </Modal>
        );
    }
}

export default CustomerChoose;